<template>
  <div class="login">
    <yd-navbar title="手机登录"></yd-navbar>
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left">手机号：</span>
        <yd-input slot="right" v-model="phone" required :show-success-icon="false" :show-error-icon="false"
                  regex="mobile" placeholder="请输入手机号码"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">验证码：</span>
        <input type="text" slot="right" v-model="code" placeholder="请输入与验证码">
        <yd-sendcode slot="right"
                     v-model="start"
                     @click.native="sendCode"
                     type="danger"
                     init-str="发送验证码"
                     run-str="重新发送({%s})"
                     reset-str="你可以重新获取验证码啦"
        ></yd-sendcode>
      </yd-cell-item>
    </yd-cell-group>
    <yd-button-group>
      <yd-button size="large" type="danger" @click.native="login()">登录</yd-button>
    </yd-button-group>

    <div class="agreement">
      <yd-checkbox v-model="checkbox" shape="circle" color="#ef4f4f">
        我已经阅读并同意
      </yd-checkbox>
      <a>土特产服务协议</a>
      <a>隐私政策</a>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        phone: '',//手机号
        code: '', //验证码
        start: false, //是否开启验证码
        checkbox: false, //是否阅读协议
      }
    },
    methods: {
      login() {
        //登录
        this.$router.push('/auth')
      },
      sendCode() {
        //发送验证码
        this.$dialog.loading.open('发送中...');
        setTimeout(() => {
          this.start = true;
          this.$dialog.loading.close();
          this.$dialog.toast({
            mes: '已发送',
            icon: 'success',
            timeout: 1500
          });
        }, 1000);
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .agreement
    padding: 0 .24rem;
    margin-top: .3rem;
    color: $color-main;
    a
      margin-right: .1rem;
      font-size: .35rem;
      text-decoration: underline

</style>
